/* =============================== */
/* CSS for control sap.m/Carousel  */
/* Belize theme                    */
/* =============================== */

/* Carousel controls: HUD */
.sapMCrslHud a {
	opacity: 0.5;
	box-shadow: @sapUiShadowLevel1;
}

.sapMCrsl .sapMCrslHud a:hover,
.sapMCrsl .sapMCrslHud a:focus {
	box-shadow: @sapUiShadowLevel1;
	border: 1px solid @sapUiButtonBorderColor;
}

.sapMCrsl .sapMCrslHud a:active {
	box-shadow: @sapUiShadowLevel1;
}

.sapMCrsl:focus {
	&:before {
		border: 1px solid @sapUiContentFocusColor;
		position: absolute;
		content: " ";
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		pointer-events: none;
	}

	&:after {
		border: 1px dotted @sapUiContentContrastFocusColor;
		position: absolute;
		content: " ";
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		pointer-events: none;
	}
}

html[data-sap-ui-browser^='ie'].sap-desktop .sapMCrsl:focus::after,
html[data-sap-ui-browser^='ed'].sap-desktop .sapMCrsl:focus::after {
	border: 1px dashed @sapUiContentContrastFocusColor;
}

.sapMCrslPrev:focus,
.sapMCrslNext:focus,
.sapMCrslPrev .sapUiIcon:focus,
.sapMCrslNext .sapUiIcon:focus {
  outline: none;
}

html.sap-desktop .sapMCrslHud .sapMCrslPrev:focus,
html.sap-desktop .sapMCrslHud .sapMCrslNext:focus {
  	&::before {
		content: "";
		position: absolute;
		top: -0.125rem;
		right: -0.125rem;
		bottom: -0.125rem;
		left: -0.125rem;
		pointer-events: none;
		border: 1px solid @sapUiContentContrastFocusColor;
	}

  	&::after {
		content: "";
		position: absolute;
		top: -0.125rem;
		right: -0.125rem;
		bottom: -0.125rem;
		left: -0.125rem;
		pointer-events: none;
		border: 1px dotted @sapUiContentFocusColor;
	}
}

html[data-sap-ui-browser^='ie'].sap-desktop .sapMCrslPrev:focus .sapUiIcon,
html[data-sap-ui-browser^='ie'].sap-desktop .sapMCrslNext:focus .sapUiIcon,
html[data-sap-ui-browser^='ie'].sap-desktop .sapMCrslPrev .sapUiIcon:focus,
html[data-sap-ui-browser^='ie'].sap-desktop .sapMCrslNext .sapUiIcon:focus {
  	&::before {
		position: absolute;
		padding-top: 0.425rem;
		top: -0.125rem;
		right: -0.125rem;
		bottom: -0.125rem;
		left: -0.125rem;
		border: 1px solid @sapUiContentContrastFocusColor;
	}

  	&::after {
		content: "";
		position: absolute;
		top: -0.125rem;
		right: -0.125rem;
		bottom: -0.125rem;
		left: -0.125rem;
		border: 1px dotted @sapUiContentFocusColor;
	}
}
